<template>
  <div class="dept-box">
    <el-alert title="没有用户哦" type="warning" v-if="users.length === 0" />
    <el-scrollbar height="100%">
      <div class="users" v-if="users.length > 0">
        <div class="users-grid">
          <div
            v-for="user in users" :key="user.id" class="user"
            @click="showUser(user.id, true)"
            :title="user.name">
            <Avatar :img="user.avatar"></Avatar>
            <div class="username">{{ user.name }}</div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";
import User from "@/mode/User";
import Avatar from "@/components/Avatar.vue";
import showUser from "@/components/user-modal";
import { useRoute } from "vue-router";
import DeptApi from "@/api/DeptApi";

const route = useRoute();
const data = reactive({
  users: new Array<User>()
});
const deptId = route.params.id;
console.log("deptId", deptId);
if (typeof deptId === "string") {
  DeptApi.users(deptId).then((res) => {
    res.data.forEach((item: User) => {
      data.users.push(item);
    });
  });
}

const { users } = toRefs(data);
</script>

<style scoped lang="scss">
.dept-box {
  margin: 15px;
  background-color: #ffffff;
  height: 100%;
}

.users {
  padding: 10px;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  .users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 93px);
    grid-template-rows: repeat(auto-fit, 80px);
    grid-row-gap: 20px;
    grid-column-gap: 20px
  }

  .user {
    text-align: center;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #cccccc;

    .username {
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden
    }
  }
}
</style>
